<template>
  <div>
    <div v-if="imgList&&imgList.length*1>0" class="swiperIndex">
      <div class="swiperBig">
        <div v-for="(item,index) in imgList" :key="index">
          <div v-if="index==activeIndex" class="videoContainer" :style="{height:videoHeight}">
            <video id="videoPlay" width="100%" height="100%" preload muted
                   :poster="item.img_url"
                   :src="item.video_url" weblit-playsinline="true" playsinline="true" x5-playsinline="true" x5-video-player-type="h5">
              <!--您的浏览器不支持 HTML5 video 标签。-->
            </video>
            <div class="videoIcon" @click.stop="videoClickPlay()">
              <img v-if="!stopImgShow" src="http://job.dayinyun.com/videoStopIcon.png" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="swiperContent">
        <swiper :options="swiperOption" ref="mySwiper">
          <!-- 这部分放你要渲染的那些内容 -->
          <swiper-slide v-for="(item,index) in imgList" :key="index" :style="{zIndex:index==activeIndex?imgList.length*10+10*1:imgList.length*10-index*1}">
            <div ref="slideItems" class="slideItems"
                 :style="{backgroundImage:'url('+item.img_url+')'}"
                 :class="{'bigImg':index==activeIndex}"
                 v-on:click="goUrl(item)">
              <div class="title">{{item.title}}</div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
<!--    <div v-else class="swiperIndex nodata flex-space-center">-->
<!--      暂无数据-->
<!--    </div>-->
  </div>
</template>

<script>
  import { swiper, swiperSlide } from "vue-awesome-swiper";
  import {getCookie} from "../../commonUtil/mUtils";
  import {GETHOMELIST} from '../../apis/internetCelebrity';
  export default {
    components: {
      swiper,
      swiperSlide,
    },
    data() {
      return {
        zIndex:-1,
        activeIndex:0,
        swiperOption: {
          initialSlide: 0, //设定初始化时slide的索引
          direction: "horizontal", //Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。
          loop: true, //禁止无限滚动
          speed: 1000, //滑动速度
          paginationClickable: true,
          observer: true,//修改swiper自己或子元素时，自动初始化swiper
          observeParents: true,//修改swiper的父元素时，自动初始化swiper
          loopedSlides: 5, // looped slides should be the same
          spaceBetween: -10,//间距
          centeredSlides: false,//居中
          slidesPerView: 3,
          slideToClickedSlide: true,
          touchMoveStopPropagation:true,
          onSlideChangeStart: swiper => {
            this.$nextTick(()=>{
              // 滑动的时候当前下标赋值
              this.activeIndex = swiper.realIndex
              //滑动的时候切换到当前视频，视频恢复初始值
              var dom = document.getElementById("videoPlay");
              var state = dom.paused;
              dom.pause();
              this.stopImgShow = false;
            })
          },
        },
        imgList:[],
        stopImgShow:false,//视频暂停icon
      }
    },
    mounted() {
      // 把路径里面的token 存起来
      let token = this.$route.query.token?this.$route.query.token:''
      if(getCookie('token')!='undefined'){
        this.$cookie.set('token',token);
      }
      this.getHomeList()
    },
    methods:{
      // 视频播放按钮
      videoClickPlay() {
        var dom = document.getElementById("videoPlay");
        var state = dom.paused;
        if (state) {
          dom.play();
          this.stopImgShow = true;
        } else {
          dom.pause();
          this.stopImgShow = false;
        }
      },
      // 点击跳转链接
      goUrl(item){
        window.location.href= item.attract_url
      },
      // ------------------接口开始-----------------
      // 获取矿金规则
      getHomeList(){
        let getHomeList = GETHOMELIST;
        getHomeList()
          .then(res=>{
            if(res.data.code*1===200){
              this.imgList = res.data.data;//图片列表
            } else {
              this.$toast(res.data.message);
            }
          })
          .catch(error => {
            console.log(error)
          })
      }
      // -----------------接口结束----------------------
    },
    computed:{
      videoHeight(){
        return (window.innerHeight - 230) + 'px'
      }
    }
  }
</script>

<style lang="less" scoped>
  @import (reference) url(../../assets/less/common);
  .swiperIndex{
    width: 100%;
    height:100%;
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:#000000;
    padding:1rem 0.3rem 0rem 0.3rem;
    box-sizing: border-box;
    overflow-y: scroll;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
    .swiperBig{
      width:100%;
      flex:1;
      padding-bottom:0.2rem;
      box-sizing:border-box ;
      .videoContainer {
        width: 100%;
        /*min-height: 8rem;*/
        position: relative;
        .videoIcon {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 0.96rem;
            height: auto;
          }
        }
        video {
          object-fit: fill;
        }
      }
    }
    .swiperContent{
      width:100%;
      margin-top: 0.2rem;
      height:3.32rem;
      .swiper-container{
        width:100%;
        height:3.32rem;
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        .swiper-wrapper {
          .swiper-slide {
            display: flex;
            align-items: flex-end;
            .slideItems{
              width:100%;
              height:2.94rem;
              background-repeat: no-repeat;
              /*opacity: 0.5;*/
              display: flex;
              align-items: center;
              justify-content: center;
              .title{
                font-size:@fontSize30;
                font-family:@fontFamily400;
                font-weight:@fontWeight600;
                color:rgba(255,255,255,1);
                line-height:0.7rem;
              }
            }
            .slideItems:after{
              position: absolute;
              top: 0;
              left: 0;
              content: "";
              background-color: rgba(0,0,0,0.5);
              /*z-index: 1;*/
              width: 100%;
              height: 100%;
            }
            .bigImg{
              width:100%;
              height:3.32rem;
              /*opacity: 1;*/
              display: flex;
              align-items: flex-end;
              justify-content: center;
              z-index:100;
            }
            .bigImg:after{
              position: absolute;
              top: 0;
              left: 0;
              content: "";
              background-color: rgba(0,0,0,0);
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
  .nodata{
    width:100%;
    height:4rem;
    color: #ffffff;
  }
</style>
